<template>
    <div class="template">
        <div class="fl" style="width:36%;">
            <!-- 表格 -->
            <standard-template 
                border
                style="margin-bottom:10px;border-bottom:1px solid #D7D7D7;"
                ref="table"
                highlight-current-row
                v-bind="tableParams"
                @handleCurrentChange="handleCurrentChange"
                @selectionChange="selectedData"
            >
            </standard-template>
            <!-- 静态绘制图形 -->
            <div style="height:400px;margin-top:20px;width:100%;background:#eeeeee;">
                <div id="echartsIdOne" ref="echartsIdOne" style="height:400px;"></div>
            </div>
        </div>
        <div class="fl" style="width:64%;">
            <!-- 动态关联图形3 -->
           <div id="echartsIdTwo" ref="echartsIdTwo" class="fl" style="height:250px;width:100%;left:-40px;margin-bottom:10px;"></div>
           <div id="echartsIdThree" ref="echartsIdThree" class="fl" style="height:250px;width:100%;left:-40px;margin-bottom:10px;"></div>
           <div id="echartsIdFour" ref="echartsIdFour" class="fl" style="height:250px;width:100%;left:-40px;margin-bottom:10px;"></div>
        </div>
        <el-button @click="dialogVisible = true">思维导图</el-button>
            <el-dialog
            title="思维导图"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
                <echartsTree></echartsTree>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </el-dialog>
       
        <!-- echartsTree -->
    </div>  
</template>
<script>
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
import StandardTemplate from '../components/baseComponents/StandardTable'
import echartsTree from "./echartsTree"
export default {
    name: "Home",
    components: {
        StandardTemplate,
        echartsTree
    },
    data() {
      return {
            dialogVisible: false,
            // 表格数据(上下布局)
            tableParams: {
                tableRowClassName:this.tableRowClassNameColor,
                // 表格接口地址  详细地址在api配置
                // url:urlCommon.queryApi.url,
                // height:''
                dragColumn:false,//是否拖拽表头
                // apiName: '',//"queryApi"
                tableStyle: 1, //1--主子表格上下布局  2---主子表格左右布局
                // 风格主题
                // tooltip:"dark",
                // 表头数据
                columns:[
                    {prop: '', label: '单选',align: 'center',type:"radio",fixed:'',isShow:true},
                    {prop: 'hIndex', label: '行号',align: 'center',type:"",fixed:'',isShow:true},
                    {prop: 'index', label: '顺序号', align: 'center',type:"",fixed:'',isShow:true},
                    {prop: 'width', label: '宽度',align: 'center',type:"",fixed:'',isShow:true},
                    {prop: 'length', label: '长度', align: 'center',type:"",fixed:'',isShow:true},
                    {prop: 'height', label: '高度', align: 'center',type:"",fixed:'',isShow:true},
                    {prop: 'level', label: '等级',align: 'center',type:"",fixed:'',isShow:true},
                ],
                // 表格数据
                tableData: [
                    {index:1,master:"钢板",rectData:[10,8],hIndex:1,id:1,width:30,height:30,level:1,length:3,
                    seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                    ]},
                    {index:2,master:"钢卷",rectData:[20,5],hIndex:2,id:2,width:40,height:40,level:2,length:3,seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                    ]},
                    {index:3,master:"横切",rectData:[30,4],hIndex:3,id:3,width:20,height:30,level:3,length:3,seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                    ]},
                    {index:4,master:"纵切",rectData:[10,2],hIndex:4,id:4,width:10,height:10,level:3,length:3,seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                    ]},
                    {index:5,master:"大卷版",rectData:[12,3],hIndex:5,id:5,width:12,height:12,level:2,length:3,seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                    ]},
                    {index:6,master:"小卷板",rectData:[14,4],hIndex:6,id:6,width:"20",height:30,level:1,length:3,seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.20],
                        [11.5, 7.20],
                    ]},
                    {index:7,master:"木桩",rectData:[8,10],hIndex:7,id:7,width:"40",height:40,level:2,length:3,seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                    ]},
                    {index:8,master:"纵横切",rectData:[3,12],hIndex:8,id:8,width:"10",height:10,level:3,length:3,seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.20],
                    ]},
                    {index:9,master:"",rectData:[3,14],hIndex:9,id:9,width:"8",height:8,level:1,length:3,seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.20],
                        [11.5, 7.20],
                    ]},
                    {index:10,master:"",rectData:[2,10],hIndex:10,id:10,width:"12",height:12,level:3,length:3,seriesData:[
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.20],
                    ]},
                ],
                //主表主键  主子表的时候必填
                id: 'id',
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:300, //上下布局主子表250 单表450
                width:100,
            }, 
            seriesData:{}
        }
    },
    methods: {
        // 多选方法
        selectedData(json){

        },
        // 单选方法
        handleCurrentChange(selection){
            var json = Object.assign({},selection)
            this.seriesData = JSON.parse(JSON.stringify(selection));
            this.initTopEcharts(json);
            this.initechartsIdTwo(json);
            json.width="";
            json.height="";
            this.initechartsIdThree(json);
            this.initechartsIdFour(json);
        },
        tableRowClassNameColor({row,rowIndex}){
            if (rowIndex%2 == 0) {
                return 'warning-row';
            } else{
                return 'success-row';
            }
            return '';
        },
        initTopEcharts(json){
            let seriesData1= {
                xAxis: {
                     show: false,
                },
                yAxis: {
                     show: false,
                },
                series: [{
                    type: 'scatter',
                    symbol:'rect',
                    color:'red',
                    symbolOffset: ['-100%', '50%'], //图标位置偏移
                    symbolSize:function(){
                        return [json.width,json.height];
                    },
                    data:[json.rectData]
            }]}; 
            let myChart = this.$echarts.init(this.$refs.echartsIdOne);
            myChart.setOption(seriesData1);
            myChart.resize();
        },
        initechartsIdTwo(selection){
            var echartsIdTwo = this.$echarts.init(this.$refs.echartsIdTwo);
                echartsIdTwo.resize();
            var CLUSTER_COUNT = selection.seriesData.length;
            var DIENSIION_CLUSTER_INDEX = 2;
            var COLOR_ALL = ['#01DDB7','#FD9392','#9DE0FF','#32A7EA','#9470DD','#E736C5','#81C859','#FFA897','#0C9DFF','#FFB64D','#F03153','#D9AC08','#7DC2FD','#978FD8'];
            var objData = {
                legendData:[],
                seriesData:[]
            }
            for (var i = 0; i < selection.seriesData.length; i++) {
                objData.legendData.push({
                    value: i,
                    label:i,
                    color: COLOR_ALL[Math.floor(Math.random() * (13 +1))]
                });
            }
            let seriesData = {
                visualMap: {
                    type: 'scroll',
                    type: 'piecewise',
                    top: 'middle',
                    max: CLUSTER_COUNT,
                    right: 15,
                    splitNumber: CLUSTER_COUNT,
                    dimension: DIENSIION_CLUSTER_INDEX,
                    pieces: objData.legendData
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                xAxis: {
                    position:'top',
                },
                yAxis: {
                    position:'bottom',
                    inverse: true,
                    type: 'value'
                },
                series: [{
                    symbolSize: 20,
                    data:selection.seriesData,
                    type: 'scatter',
                },{
                    type: 'scatter',
                    symbol:'rect',
                    color:'red',
                    // symbolOffset: ['-50%', '-50%'], //图标位置偏移
                    symbolSize:function(){
                        return [selection.width,selection.height];
                    },
                    data:[selection.rectData]
                }]
            };  
            echartsIdTwo.setOption(seriesData,true);
            var that = this;
            echartsIdTwo.on('click', function (param) {
                that.initechartsIdThree(that.seriesData);
                that.initechartsIdFour(that.seriesData);
                var json = Object.assign({},that.seriesData);
                json.width="";
                json.height="";
                that.initechartsIdTwo(json);
               
            })
        },
        initechartsIdThree(selection){
            var CLUSTER_COUNT = selection.seriesData.length;
            var DIENSIION_CLUSTER_INDEX = 2;
            var COLOR_ALL = ['#01DDB7','#FD9392','#9DE0FF','#32A7EA','#9470DD','#E736C5','#81C859','#FFA897','#0C9DFF','#FFB64D','#F03153','#D9AC08','#7DC2FD','#978FD8'];
            var objData = {
                legendData:[],
                seriesData:[]
            }
            for (var i = 0; i < selection.seriesData.length; i++) {
                objData.legendData.push({
                    value: i,
                    label:i,
                    color: COLOR_ALL[Math.floor(Math.random() * (13 +1))]
                });
            }
            let seriesData = {
                visualMap: {
                    type: 'scroll',
                    type: 'piecewise',
                    top: 'middle',
                    max: CLUSTER_COUNT,
                    right: 15,
                    splitNumber: CLUSTER_COUNT,
                    dimension: DIENSIION_CLUSTER_INDEX,
                    pieces: objData.legendData
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                xAxis: {
                    position:'top',
                },
                yAxis: {
                    position:'bottom',
                    inverse: true,
                    type: 'value'
                },
                series: [{
                    symbolSize: 20,
                    data:selection.seriesData,
                    type: 'scatter',
                },{
                    type: 'scatter',
                    symbol:'rect',
                    color:'red',
                    // symbolOffset: ['-50%', '-50%'], //图标位置偏移
                    symbolSize:function(){
                        return [selection.width,selection.height];
                    },
                    data:[selection.rectData]
                }]
            };  
            let myChart = this.$echarts.init(this.$refs.echartsIdThree);
            myChart.setOption(seriesData);
            myChart.resize();
            var that = this;
            myChart.on('click', function () {
                that.initechartsIdTwo(that.seriesData);
                that.initechartsIdFour(that.seriesData);
                var json = Object.assign({},that.seriesData);
                json.width="";
                json.height="";
                that.initechartsIdThree(json);
            })
        },
        initechartsIdFour(selection){
            var CLUSTER_COUNT = selection.seriesData.length;
            var DIENSIION_CLUSTER_INDEX = 2;
            var COLOR_ALL = ['#01DDB7','#FD9392','#9DE0FF','#32A7EA','#9470DD','#E736C5','#81C859','#FFA897','#0C9DFF','#FFB64D','#F03153','#D9AC08','#7DC2FD','#978FD8'];
            var objData = {
                legendData:[],
                seriesData:[]
            }
            for (var i = 0; i < selection.seriesData.length; i++) {
                objData.legendData.push({
                    value: i,
                    label:i,
                    color: COLOR_ALL[Math.floor(Math.random() * (13 +1))]
                });
            }
            let seriesData = {
                visualMap: {
                    type: 'scroll',
                    type: 'piecewise',
                    top: 'middle',
                    max: CLUSTER_COUNT,
                    right: 15,
                    splitNumber: CLUSTER_COUNT,
                    dimension: DIENSIION_CLUSTER_INDEX,
                    pieces: objData.legendData
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                xAxis: {
                    position:'top',
                },
                yAxis: {
                    position:'bottom',
                    inverse: true,
                    type: 'value'
                },
                series: [{
                    symbolSize: 20,
                    data:selection.seriesData,
                    type: 'scatter',
                },{
                    type: 'scatter',
                    symbol:'rect',
                    color:'red',
                    // symbolOffset: ['-50%', '-50%'], //图标位置偏移
                    symbolSize:function(){
                        return [selection.width,selection.height];
                    },
                    data:[selection.rectData]
                }]
            };  
            let myChart = this.$echarts.init(this.$refs.echartsIdFour);
            myChart.setOption(seriesData);
            myChart.resize();
            var that = this;
            myChart.on('click', function () {
                that.initechartsIdTwo(that.seriesData);
                that.initechartsIdThree(that.seriesData);
                var json = Object.assign({},that.seriesData);
                json.width="";
                json.height="";
                that.initechartsIdFour(json)
            })
        }
    },
    mounted(){
        this.$refs['table'].query({});
    }
}
</script>
<style scoped>
    .template{
        width: 100%;
    }
    .success-row{
        background-color: #FFFFFF!important;
    }
    .el-table >>> td{
        border: 1px solid #D7D7D7!important;
        border-bottom: 1px solid #D7D7D7!important;
    }
    .el-table--border >>> td{
        border-right: 1px solid #D7D7D7!important;
    }
</style>


